From f801f8f422954b884a6541321dba0669ee9d6173 Mon Sep 17 00:00:00 2001 From: Factiven Date: Sun, 22 Oct 2023 19:43:17 +0700 Subject: Update v4.2.0 (#93) --- pages/en/search/[...param].js | 305 ++++++++++++++++++++++++++++++------------ 1 file changed, 220 insertions(+), 85 deletions(-) (limited to 'pages/en/search/[...param].js') diff --git a/pages/en/search/[...param].js b/pages/en/search/[...param].js index 603cd17..2cb609f 100644 --- a/pages/en/search/[...param].js +++ b/pages/en/search/[...param].js @@ -1,5 +1,5 @@ import { useEffect, useRef, useState } from "react"; -import { AnimatePresence, motion as m } from "framer-motion"; +import { motion as m } from "framer-motion"; import Skeleton from "react-loading-skeleton"; import { useRouter } from "next/router"; import Link from "next/link"; @@ -25,6 +25,8 @@ import { Cog6ToothIcon, TrashIcon } from "@heroicons/react/20/solid"; import useDebounce from "@/lib/hooks/useDebounce"; import { NewNavbar } from "@/components/shared/NavBar"; import MobileNav from "@/components/shared/MobileNav"; +import SearchByImage from "@/components/search/searchByImage"; +import { PlayIcon } from "@heroicons/react/24/outline"; export async function getServerSideProps(context) { const { param } = context.query; @@ -91,9 +93,10 @@ export default function Card({ }) { const inputRef = useRef(null); const router = useRouter(); - // const { data: session } = useSession(); const [data, setData] = useState(); + const [imageSearch, setImageSearch] = useState(); + const [loading, setLoading] = useState(true); const [search, setQuery] = useState(query); @@ -125,16 +128,18 @@ export default function Card({ }); if (data?.media?.length === 0) { setNextPage(false); + setLoading(false); } else if (data !== null && page > 1) { setData((prevData) => { return [...(prevData ?? []), ...data?.media]; }); setNextPage(data?.pageInfo.hasNextPage); + setLoading(false); } else { setData(data?.media); + setNextPage(data?.pageInfo.hasNextPage); + setLoading(false); } - setNextPage(data?.pageInfo.hasNextPage); - setLoading(false); } useEffect(() => { @@ -142,6 +147,7 @@ export default function Card({ setPage(1); setNextPage(true); advance(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ debounceSearch, type?.value, @@ -153,11 +159,17 @@ export default function Card({ ]); useEffect(() => { + if (imageSearch) return; advance(); - }, [page]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [page, imageSearch]); useEffect(() => { function handleScroll() { + if (imageSearch) { + window.removeEventListener("scroll", handleScroll); + return; + } if (page > 10 || !nextPage) { window.removeEventListener("scroll", handleScroll); return; @@ -174,7 +186,7 @@ export default function Card({ window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); - }, [page, nextPage]); + }, [page, nextPage, imageSearch]); const handleKeyDown = async (event) => { if (event.key === "Enter") { @@ -189,6 +201,7 @@ export default function Card({ }; function trash() { + setImageSearch(); setQuery(); setGenre(); setFormat(); @@ -202,6 +215,18 @@ export default function Card({ setIsVisible(!isVisible); } + const handleVideoHover = (hovered, id) => { + const updatedImageSearch = imageSearch?.map((item) => { + if (item.filename === id) { + return { ...item, hovered }; + } + return item; + }); + setImageSearch(updatedImageSearch); + }; + + // console.log({ loading, data }); + return ( <> @@ -290,6 +315,7 @@ export default function Card({ > +
*/}
- -
- {loading - ? "" - : !data?.length && ( -
- Oops!

Nothing's Found... +
+ {loading + ? "" + : !data && ( +
+ Oops!

Nothing's Found... +
+ )} + + {data && + data?.length > 0 && + !imageSearch && + data?.map((anime, index) => { + const anilistId = anime?.mappings?.find( + (x) => x.providerId === "anilist" + )?.id; + return ( + + + {anime.title.userPreferred} + + +

+ {anime.status === "RELEASING" ? ( + + ) : anime.status === "NOT_YET_RELEASED" ? ( + + ) : null} + {anime.title.userPreferred} +

+ +

+ {anime.format ||

-

} ·{" "} + {anime.status ||

-

} ·{" "} + {anime.episodes + ? `${anime.episodes || "N/A"} Episodes` + : `${anime.chapters || "N/A"} Chapters`} +

+ + ); + })} + + {loading && ( + <> + {[1, 2, 4, 5, 6, 7, 8].map((item) => ( +
+
+
- )} - {data && - data?.map((anime, index) => { - return ( - +

+ +

+
+
+ ))} + + )} +
+ + {imageSearch && ( +
+ {imageSearch.map((a, index) => { + return ( + + { + handleVideoHover(true, a.filename); + }} + onMouseLeave={() => handleVideoHover(false, a.filename)} > - +
+
+ +

+ {`Episode ${a.episode}`} +

+
+ + {a?.image && ( {anime.title.userPreferred} - - -

- {anime.status === "RELEASING" ? ( - - ) : anime.status === "NOT_YET_RELEASED" ? ( - - ) : null} - {anime.title.userPreferred} -

- -

- {anime.format ||

-

} ·{" "} - {anime.status ||

-

} ·{" "} - {anime.episodes - ? `${anime.episodes || "N/A"} Episodes` - : `${anime.chapters || "N/A"} Chapters`} -

- - ); - })} - - {loading && ( - <> - {[1, 2, 4, 5, 6, 7, 8].map((item) => ( -
+ )} + + + - - -
- ))} - - )} + {/*

{a.title}

*/} +

+ + {a?.anilist.title.romaji} + {" "} + | Episode {a.episode} +

+ + + ); + })}
- {!loading && page > 10 && nextPage && ( - - )} - + )} + {!loading && page > 10 && nextPage && ( + + )}
{/*
*/}
-- cgit v1.2.3